<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#myCanvas{
			display:block;
			margin:50px auto;
			position:relative;
		}
		#myCanvas.active:after{
			content:'结束了';
			position:absolute;
			top:0; left:0;
			bottom:0; right:0;
			margin:auto;
			background:rgba(0,0,0,.6);
		}
		.jf{
			text-align:center;
		}
	</style>
</head>
<body>
	<div class="tcs">
		<canvas id="myCanvas"></canvas>
		<div class="jf">
			<p>得分：<span id="num"></span></p>
			<button id="cxks">重新开始</button>
		</div>
	</div>

	<script>
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');

		c.style.background = '#000';

		var gsize = 20;  //格子大小
		var cWIDTH = 800; //画布宽度
		var cHEIGHT = 800; //画布高度
		var X,Y; //食物坐标
		var sX = cWIDTH / 2 - gsize;
		var sY = cHEIGHT / 2; //蛇头坐标
		var sLeng = 3; //初始蛇身长度
		var sData = []; //蛇的每节坐标
		var fx = 39; //默认前行方向  37-左  38-上  39-右  40-下
		var num = 0; //积分
		var game = 0;

		var numHTML = document.getElementById('num');
		var cxks = document.getElementById('cxks');

		c.width = cWIDTH;
		c.height = cHEIGHT;

		function xyxian(){
			//遍历竖线
			for(var i=0;i< cWIDTH / gsize;i++){
				ctx.beginPath();
				ctx.strokeStyle = '#fff';
				ctx.moveTo(i*gsize , 0);
				ctx.lineTo(i*gsize , cHEIGHT);
				ctx.stroke();
			}

			for(var i=0;i< cHEIGHT / gsize;i++){
				ctx.beginPath();
				ctx.strokeStyle = '#fff';
				ctx.moveTo(0 , i*gsize);
				ctx.lineTo(cWIDTH , i*gsize);
				ctx.stroke();
			}
		}
		xyxian();
		

		function zbX(){
			var XB = Math.floor(Math.random()*cWIDTH / gsize);
			return XB * gsize
		}

		function zbY(){
			var YB = Math.floor(Math.random()*cHEIGHT / gsize);
			return YB * gsize
		}

		for(var i=0;i<sLeng;i++){
			sData[i] = [sX-i*gsize,sY];
		}
		function Sn(){
			ctx.beginPath();
			ctx.fillStyle = 'yellow';
			for(var i=0;i<sLeng;i++){
				ctx.fillRect(sData[i][0],sData[i][1],gsize,gsize);
				ctx.fill();
			}

			ctx.beginPath();
			
			for(var i=0;i<sLeng;i++){
				if(i == 0){
					ctx.fillStyle = 'yellow';
				}else{
					ctx.fillStyle = 'green';
				}
				ctx.fillRect(sData[i][0]+1,sData[i][1]+1,gsize-2,gsize-2);
				ctx.fill();
			}
		}
		Sn()

		//随机出现食物
		function mathDian(){
			X = zbX();
			Y = zbY();

			return X,Y;
		}
		mathDian();
		function food(){
			ctx.beginPath();
			ctx.fillStyle = 'red';
			ctx.fillRect(X, Y , gsize , gsize);
			ctx.fill();
		}
		food();

		cxks.onclick = function(){
			num = 0;
			numHTML.innerHTML = num;
			fx = 39;
			if(game == 1){
				sLeng = 3;
				sX = cWIDTH / 2 - gsize;
				sY = cHEIGHT / 2; //蛇头坐标
				for(var i=0;i<sLeng;i++){
					sData[i] = [sX-i*gsize,sY];
				}

				set = setInterval(dsn,500);

				document.onkeydown=function(event){
					ctx.clearRect(0,0,c.width,c.height); 
					food();
					xyxian();
					var e = event || window.event || arguments.callee.caller.arguments[0];
					
					var lastData = sData[0];
					fx = e.keyCode;
					switch(e.keyCode){
						case 37:
							sData.unshift([lastData[0] - gsize , lastData[1] ]);
							break;
						case 38:
							sData.unshift([lastData[0] , lastData[1] - gsize]);
							break;
						case 39:
							sData.unshift([lastData[0] + gsize , lastData[1]]);
							break;
						case 40:
							sData.unshift([lastData[0] , lastData[1] + gsize]);
							break;
					}
					xp();
					up();
				}; 
				game = 0;
			}else{
				num = 0;
				numHTML.innerHTML = num;
				fx = 39;
				for(var i=0;i<sLeng;i++){
					sLeng = 3;
					sX = cWIDTH / 2 - gsize;
					sY = cHEIGHT / 2; //蛇头坐标
					for(var i=0;i<sLeng;i++){
						sData[i] = [sX-i*gsize,sY];
					}
				}
			}
			
		}

		function xp(){
			if(sData[0][0] == X && sData[0][1] == Y){
				mathDian();
				food();
				sLeng++;
				num += 1;
				numHTML.innerHTML = num;
			}else{
				ctx.clearRect(sData[sLeng-1][0], sData[sLeng-1][1], gsize, gsize);
				sData.pop();
			}

			Sn();
		}
		
		document.onkeydown=function(event){
			ctx.clearRect(0,0,c.width,c.height); 
			food();
			xyxian();
			var e = event || window.event || arguments.callee.caller.arguments[0];
			
			var lastData = sData[0];
			fx = e.keyCode;
			switch(e.keyCode){
				case 37:
					sData.unshift([lastData[0] - gsize , lastData[1] ]);
					break;
				case 38:
					sData.unshift([lastData[0] , lastData[1] - gsize]);
					break;
				case 39:
					sData.unshift([lastData[0] + gsize , lastData[1]]);
					break;
				case 40:
					sData.unshift([lastData[0] , lastData[1] + gsize]);
					break;
			}
			xp();
			up();
		}; 

		function dsn(){
			ctx.clearRect(0,0,c.width,c.height); 
			food();
			xyxian();
			var lastData = sData[0];
			switch(fx){
				case 37:
					sData.unshift([lastData[0] - gsize , lastData[1] ]);
					break;
				case 38:
					sData.unshift([lastData[0] , lastData[1] - gsize]);
					break;
				case 39:
					sData.unshift([lastData[0] + gsize , lastData[1]]);
					break;
				case 40:
					sData.unshift([lastData[0] , lastData[1] + gsize]);
					break;
			}
			xp();

			up();

		}

		var set = setInterval(dsn,500)

		function up(){
			if(sData[0][0] >= cWIDTH || sData[0][0] < 0 || sData[0][1] >= cHEIGHT || sData[0][1] < 0){
				alert('你死了,得分'+num);
				clearInterval(set);
				document.onkeydown=function(event){
					return false;
				}

				game = 1;

			}

			for(i in sData){
				if(sData[i][0] == sData[0][0] && sData[i][1] == sData[0][1] && i != 0){
					alert('你死了,得分'+num);
					clearInterval(set);
					document.onkeydown=function(event){
						return false;
					}
					game = 1;
				}
			}
		}

	</script>
</body>
</html>